<template>
	<!-- 轮播图展示酒店介绍 -->
	<el-carousel class="carousel" :interval="3000" height="500px">
		<el-carousel-item class="carousel-item" v-for="item in 5" :key="item">
			<el-image class="carousel-item-img" fit="cover" :src="'src/assets/img/test/' + item + '.jpg'" />
		</el-carousel-item>
	</el-carousel>
	<div class="cards">
		<!-- 特价房展示 -->
		<el-card class="sale-card card" shadow="hover">
			<template #header>
				<div class="sale-card-header">
					<span class="card-title">今日特价</span>
					<el-button type="primary" size="large" plain @click="linkToBookPage">
						前往预定
						<el-icon style="margin-left:10px">
							<DArrowRight />
						</el-icon>
					</el-button>
				</div>
			</template>
		</el-card>
		<!-- 酒店地图 -->
		<el-card class="location-card card" shadow="hover" @click="handleLocationCardClicked">
			<div class="location-card-text">
				<div class="card-title">
					酒店位置
				</div>
				<div class="card-content">
					<el-icon>
						<LocationInformation />
					</el-icon>
					内蒙古自治区呼和浩特市昭乌达路81号
				</div>
				<el-button type="primary" size="large" plain>
					查看地图
					<el-icon style="margin-left:20px">
						<DArrowRight />
					</el-icon>
				</el-button>
			</div>
			<img class="location-card-img" fit="cover" src="@/assets/img/city_park.png" />
		</el-card>
	</div>
	
</template>
<script setup lang="ts">
import { DArrowRight, LocationInformation } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
// 以下饼状图
// var chartDom = document.getElementById('main');
// var myChart = echarts.init(chartDom);
// var option;

// option = {
//   title: {
//     text: 'Nightingale Chart',
//     subtext: 'Fake Data',
//     left: 'center'
//   },
//   tooltip: {
//     trigger: 'item',
//     formatter: '{a} <br/>{b} : {c} ({d}%)'
//   },
//   legend: {
//     left: 'center',
//     top: 'bottom',
//     data: [
//       'rose1',
//       'rose2',
//       'rose3',
//       'rose4',
//       'rose5',
//       'rose6',
//       'rose7',
//       'rose8'
//     ]
//   },
//   toolbox: {
//     show: true,
//     feature: {
//       mark: { show: true },
//       dataView: { show: true, readOnly: false },
//       restore: { show: true },
//       saveAsImage: { show: true }
//     }
//   },
//   series: [
//     {
//       name: 'Radius Mode',
//       type: 'pie',
//       radius: [20, 140],
//       center: ['25%', '50%'],
//       roseType: 'radius',
//       itemStyle: {
//         borderRadius: 5
//       },
//       label: {
//         show: false
//       },
//       emphasis: {
//         label: {
//           show: true
//         }
//       },
//       data: [
//         { value: 40, name: 'rose 1' },
//         { value: 33, name: 'rose 2' },
//         { value: 28, name: 'rose 3' },
//         { value: 22, name: 'rose 4' },
//         { value: 20, name: 'rose 5' },
//         { value: 15, name: 'rose 6' },
//         { value: 12, name: 'rose 7' },
//         { value: 10, name: 'rose 8' }
//       ]
//     },
//     {
//       name: 'Area Mode',
//       type: 'pie',
//       radius: [20, 140],
//       center: ['75%', '50%'],
//       roseType: 'area',
//       itemStyle: {
//         borderRadius: 5
//       },
//       data: [
//         { value: 30, name: 'rose 1' },
//         { value: 28, name: 'rose 2' },
//         { value: 26, name: 'rose 3' },
//         { value: 24, name: 'rose 4' },
//         { value: 22, name: 'rose 5' },
//         { value: 20, name: 'rose 6' },
//         { value: 18, name: 'rose 7' },
//         { value: 16, name: 'rose 8' }
//       ]
//     }
//   ]
// };
// option && myChart.setOption(option);
//以上饼状图
const router = useRouter()

const handleLocationCardClicked = () => {
	window.open('https://j.map.baidu.com/f7/Gt4')
}
const linkToBookPage = () => {
	router.push('/book')
}
</script>
<style lang="less" scoped>
.carousel {
	&-item {
		display: flex;
		justify-content: center;

		&-img {
			width: 100%;
		}
	}
}

.cards {
	width: 60%;
	margin: auto;

	.card {
		margin: 40px 0;

		&-title {
			font-size: 50px;
			font-weight: 700;
		}

		&-content {
			font-size: 20px;
			font-weight: 400;
			display: flex;
			align-items: center;
		}
	}

	.location-card {
		cursor: pointer;

		&-text {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-around;
			padding: 0 40px;
		}

		&-img {
			height: 100%;
		}
	}

	.sale-card {
		&-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>

<style lang="less">
.location-card {

	.el-card__body {
		padding: 0;
		height: 300px;
		display: flex;
	}
}
</style>